/**
 * Created by Jacky.Gao on 2017-10-16.
 */
import Property from './Property.js';
export default class CheckboxProperty extends Property {
    constructor() {
        super();
        this.init();
    }
    init() {
        this.col.append(this.buildBindParameter());
        this.positionLabelGroup = this.buildPositionLabelGroup();
        this.col.append(this.positionLabelGroup);
        this.col.append(this.buildLabelGroup());
        this.col.append(this.buildOptionsInlineGroup());
        this.optionFormGroup = $("<div class='form-group'>");
        this.col.append(this.optionFormGroup);
    }
    addCheckboxEditor(checkbox, defaultValue) {
        var self = this;
        var inputGroup = $("<div class='input-group'>");
        var check = $("<input style='margin: 12px 0px 0px;' type='checkbox' id='" + checkbox.value + "' name='checkboxAi' value='" + checkbox.value + "' >")
        var text = $("<input type='text' class='form-control' style='float: right;width: 90%;'>");
        inputGroup.append(check)
        inputGroup.append(text);
        check.change(function () {
            if ($("#" + checkbox.value).is(':checked')) {
                $("#" + checkbox.value).prop("checked", true)
            } else {
                $("#" + checkbox.value).prop("checked", false)
            }
            let s = []
            $("input:checkbox:checked").each(function () {
                s.push($(this).val())
            })
            self.current.setDefaultValue(s.join(','))
        })
        text.change(function () {
            var value = $(this).val();
            var json = { value: value, label: value };
            var array = value.split(",");
            if (array.length == 2) {
                json.label = array[0];
                json.value = array[1];
            }
            checkbox.setValue(json);
        });
        if (checkbox.label === checkbox.value) {
            if (defaultValue && defaultValue.split(',')) {
                var list = defaultValue.split(',')
                for (let index = 0; index < list.length; index++) {
                    const element = list[index];
                    if (checkbox.value === element) {
                        check.prop("checked", true)
                    }
                }
            }
            text.val(checkbox.label);
        } else {
            text.val(checkbox.label + "," + checkbox.value);
        }
        var addon = $("<span class='input-group-addon'>");
        inputGroup.append(addon);
        var del = $("<span class='pb-icon-delete'><li class='glyphicon glyphicon-trash'></li></span>");
        del.click(function () {
            if (self.current.options.length === 1) {
                bootbox.alert("至少要保留一个选项!");
                return;
            }
            self.current.removeOption(checkbox);
            inputGroup.remove();
        });
        addon.append(del);
        var add = $("<span class='pb-icon-add' style='margin-left: 10px'><li class='glyphicon glyphicon-plus'></span>");
        add.click(function () {
            var newOption = self.current.addOption();
            self.addCheckboxEditor(newOption);
        });
        addon.append(add);
        this.simpleOptionGroup.append(inputGroup);
    }
    refreshValue(editor) {
        console.log(editor)
        super.refreshValue(editor);
        this.optionFormGroup.empty();
        const group = $(`<div class="form-group"><label>数据来源</label></div>`);
        const datasourceSelect = $(`<select class="form-control">
               <option value="dataset">数据集</option>
               <option value="simple">固定值</option>
           </select>`);
        group.append(datasourceSelect);
        this.optionFormGroup.append(group);
        this.simpleOptionGroup = $(`<div class="form-group"></div>`);
        this.optionFormGroup.append(this.simpleOptionGroup);
        this.datasetGroup = $(`<div class="form-group"></div>`);
        this.optionFormGroup.append(this.datasetGroup);
        this.defaultValueGroup = $("<div class='form-group' ><label class='control-label'>默认值</label></div>");
        this.optionFormGroup.append(this.defaultValueGroup);
        const _this = this;
        datasourceSelect.change(function () {
            if ($(this).val() === 'dataset') {
                $('#defaultSelect').val('1')
                $('#customInput').val('')
                editor.useDataset = true;
                _this.datasetGroup.show();
                _this.simpleOptionGroup.hide();
                _this.defaultValueGroup.show();
            } else {
                editor.useDataset = false;
                _this.datasetGroup.hide();
                _this.simpleOptionGroup.show();
                _this.defaultValueGroup.hide();
            }
        });
        const datasetGroup = $(`<div class="form-group"><label>数据集</label></div>`);
        this.datasetGroup.append(datasetGroup);
        const datasetSelect = $(`<select class="form-control"></select>`);
        datasetGroup.append(datasetSelect);
        let dsName = null;
        for (let datasetName of formBuilder.datasetMap.keys()) {
            datasetSelect.append(`<option>${datasetName}</option>`);
            dsName = datasetName;
        }
        if (editor.dataset) {
            dsName = editor.dataset;
        } else {
            editor.dataset = dsName;
        }
        datasetSelect.val(dsName);
        let fields = formBuilder.datasetMap.get(dsName);
        if (!fields) fields = [];
        const labelGroup = $(`<div class="form-group"><label>显示值字段名</label></div>`);
        this.datasetGroup.append(labelGroup);
        const labelSelect = $(`<select class="form-control"></select>`);
        labelGroup.append(labelSelect);
        const valueGroup = $(`<div class="form-group"><label>实际值字段名</label></div>`);
        this.datasetGroup.append(valueGroup);
        const valueSelect = $(`<select class="form-control"></select>`);
        labelSelect.change(function () {
            editor.labelField = $(this).val();
        });
        valueSelect.change(function () {
            editor.valueField = $(this).val();
        });
        let targetField = null;
        for (let field of fields) {
            labelSelect.append(`<option>${field.name}</option>`);
            valueSelect.append(`<option>${field.name}</option>`);
            targetField = field.name;
        }
        datasetSelect.change(function () {
            const dsName = $(this).val();
            if (!dsName) {
                return;
            }
            editor.dataset = dsName;
            labelSelect.empty();
            valueSelect.empty();
            fields = formBuilder.datasetMap.get(dsName);
            if (!fields) fields = [];
            for (let field of fields) {
                labelSelect.append(`<option>${field.name}</option>`);
                valueSelect.append(`<option>${field.name}</option>`);
                targetField = field.name;
            }
            editor.labelField = targetField;
            editor.valueField = targetField;
            labelSelect.val(targetField);
            valueSelect.val(targetField);
        });
        if (editor.labelField) {
            targetField = editor.labelField;
        } else {
            editor.labelField = targetField;
        }
        labelSelect.val(targetField);
        if (editor.valueField) {
            targetField = editor.valueField;
        } else {
            editor.valueField = targetField;
        }
        valueSelect.val(targetField);
        valueGroup.append(valueSelect);
        if (editor.useDataset) {
            datasourceSelect.val('dataset');
            this.datasetGroup.show();
            this.simpleOptionGroup.hide();
            this.defaultValueGroup.show()
        } else {
            this.datasetGroup.hide();
            this.defaultValueGroup.hide()
            this.simpleOptionGroup.show();
            datasourceSelect.val('simple');
        }
        this.simpleOptionGroup.append($("<label>选项(若显示值与实际值不同，则用“,”分隔，如“是,true”等)</label>"));
        var self = this;
        const defaultValue = editor.showValue ? editor.showValue : editor.defaultValue || ''
        $.each(this.current.options, function (index, checkbox) {
            self.addCheckboxEditor(checkbox, editor.defaultValue);
        });
        this.defaultSelect = $("<select class='form-control'>");
        this.defaultSelect.append($("<option value='1'>自定义</option>"));
        this.defaultSelect.append($("<option value='2'>系统</option>"));
        this.defaultValueGroup.append(this.defaultSelect);
        this.custom = $(`<input type='text' value='${defaultValue}' id='customInput'  class='form-control'>`);
        this.system = $("<select class='form-control' id='systemSelect'>");
        this.system.append($("<option value='1'>当前用户</option>"));
        this.system.append($("<option value='2'>当前部门</option>"));
        this.system.append($("<option value='3'>当前组织</option>"));
        this.system.append($("<option value='4'>当前岗位</option>"));
        this.system.append($("<option value='5'>当前角色</option>"));
        this.system.append($("<option value='6'>当前用户主管</option>"));
        this.defaultValueGroup.append(this.custom);
        this.defaultValueGroup.append(this.system);
        this.system.val(defaultValue || '1')
        this.defaultSelect.val(editor.defaultType || '1')
        this.defaultSelect.change(function () {
            if ($(this).val() === '1') {
                $('#customInput').val('')
                _this.custom.show()
                _this.system.hide()
            }
            if ($(this).val() === '2') {
                $('#systemSelect').val('1')
                $('#customInput').val('')
                _this.custom.hide()
                _this.system.show()
            }
            _this.current.setDefaultType($(this).val())
        })
        this.system.change(function () {
            _this.current.setDefaultValue($(this).val())
        })
        this.custom.change(function () {
            _this.current.setDefaultValue($(this).val())
        })
        if (this.defaultSelect.val() === '1') {
            this.custom.show()
            this.system.hide()
        }
        if (this.defaultSelect.val() === '2') {
            this.custom.hide()
            this.system.show()
        }
    }
}